/*
 * @Author: weidewei
 * @Date: 2025-11-20 10:09:02
 * @LastEditors: weidewei
 * @LastEditTime: 2025-11-20 15:18:22
 * @Description:
 * @FilePath: \2025-front-face\vite-react-ts-template\src\pages\useRef.tsx
 */
// import { useRef, useEffect, useState } from 'react';
import styled from 'styled-components';
export default function useRefComp() {
  const [count, setCount] = useState(0);
  const countRef = useRef(0); // 不会触发重新渲染
  // 获取dom元素的引用
  const inpRef = useRef<HTMLInputElement>(null);
  //   const refCount = useRef(0);
  const [startTime, setStartTime] = useState<any>(null);
  const [now, setNow] = useState<any>(null);
  const intervalRef = useRef<any>(null);
  let secondsPassed = 0;
  const listRef = useRef(null);
  if (startTime != null && now != null) {
    secondsPassed = (now - startTime) / 1000;
  }
  function handleFocus() {
    inpRef.current!.style.color = '#000';
  }
  function handleBlur() {
    inpRef.current!.style.color = 'orangered';
  }
  function handleStart() {
    setStartTime(Date.now());
    setNow(Date.now());
    clearInterval(intervalRef.current);
    intervalRef.current = setInterval(() => {
      setNow(Date.now());
    }, 10);
  }

  function handleStop() {
    clearInterval(intervalRef.current);
  }

  function scrollToIndex(index:number) {
    const listNode: any = listRef.current;
    const imgNode = listNode.querySelectorAll('li > img')[index];
    imgNode.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest',
      inline: 'center'
    });
  }

  useEffect(() => {
    //   setTimeout(() => {
    //       inpRef.current?.focus();
    //   }, 1000);
    // console.log('count',count);
    countRef.current = count;
  }, [count]);
  function handleStateIncrement() {
    setCount(count + 1);
  }
  function handleIncrement() {
    countRef.current += 1;
    console.log(countRef.current);
  }
  return (
    <Wrapper>
      <div className="ref">
        input：
        <input ref={inpRef} onBlur={handleBlur} onFocus={handleFocus} type="text" />
        <p>State计数: {count} (触发渲染)</p>
        <p>Ref计数: {countRef.current} (不触发渲染)</p>
        <p>之前的count:{countRef.current}</p>
        <h3>时间戳: {secondsPassed}</h3>
        <ul ref={listRef}>
          <li>
            <img
              src="https://placecats.com/neo/300/200"
              alt="Neo"
            />
          </li>
          <li>
            <img
              src="https://placecats.com/millie/200/200"
              alt="Millie"
            />
          </li>
          <li>
            <img
              src="https://placecats.com/bella/199/200"
              alt="Bella"
            />
          </li>
        </ul>
        <button onClick={handleIncrement}>Ref +1</button>
        <button onClick={handleStateIncrement}>State +1</button>
        <button onClick={handleStart}>开始</button>
        <button onClick={handleStop}>停止</button>
        <button onClick={() => scrollToIndex(0)}>
          Neo
        </button>
        <button onClick={() => scrollToIndex(1)}>
          Millie
        </button>
        <button onClick={() => scrollToIndex(2)}>
          Bella
        </button>
      </div>
    </Wrapper>
  );
}
const Wrapper = styled.div`
  .ref {
    color: blue;
  }
  ul,li {
    list-style: none;
    white-space: nowrap;
  }  
    ul {
      width: 300px;
      overflow: hidden;
      padding-left: 0;
    }
    li {
      display: inline-block;
    }
`;
